<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demo</title>
  </head>
  <body>
    <div id="app">
      <h1>1.属性的绑定- v-bind:属性名="变量名" 可以简写成 :属性名</h1>
      <p v-bind:title="timsg">{{ msg }}</p>
      <p :title="timsg">{{ msg }}</p>
      <img :src="url" alt="" />
      <a :href="link" target="_blank">百度</a>
      <input type="button" value="按钮不可点" :disabled="abl" />
      <input type="button" value="按钮不可点" :disabled="false" />

      <h1>2.事件绑定- v-on:事件名="事件处理函数或表达式" 可以简写成 @click</h1>
      <p>数量:{{ num }}</p>
      <!-- <input type="button" value="加1" v-on:click="num++" />
      <input type="button" value="减1" @click="num--" /> -->
      <input type="button" value="加1" v-on:click="add()" />
      <input type="button" value="减1" @click="cut" />
      <input type="button" value="恭喜发财" @click="show('红包拿来')" />
      <input
        type="button"
        value="事件源对象"
        class="active"
        @click="chage($event,6666)"
      />

      <h1>回车提交数据</h1>
      <p>留言：{{ tex }}</p>
      <input type="text" @keyup.13="pushword($event)" />
    </div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    //属性绑定和事件绑定
    let vm = new Vue({
      el: "#app",

      data: {
        msg: "剁椒鱼头",
        timsg: "我爱吃辣椒",
        url: "https://cn.vuejs.org/images/logo.png",
        link: "http://www.baidu.com",
        num: 1,
        tex: "",
        abl: true,
      },

      //存放所有的方法
      methods: {
        //功能：点击按钮加1
        add() {
          console.log("加1了");
          let num = this.num;
          num++;
          if (num > 5) {
            //不能超过库存量
            alert("超过库存量");
            num = 5;
          }
          this.num = num;
        },

        //功能：点击按钮减1
        cut() {
          console.log("减1了");
          // this.add()
          let num = this.num;
          num--;
          if (num < 1) {
            //不能超过库存量
            alert("至少买一份");
            num = 1;
          }
          this.num = num;
        },

        //功能：点击恭喜发财，传参
        show(data) {
          alert(data);
        },

        //功能：点击获取事件源对象
        chage(ev, n) {
          console.log(ev.target.tagName); //INPUT
          console.log(ev.target.className); //active
          console.log(n);
        },

        //功能：回车提交留言
        pushword(ev) {
          console.log(ev.target.value);
          this.tex = ev.target.value; //设置属性值
          ev.target.value = ""; //清空表单
          ev.target.focus(); //聚焦
        },
      },
    });

    console.log(vm);
  </script>
</html>
